<template>
    <yorha-tab>
        <yorha-tab-button>DEMO1</yorha-tab-button>
        <yorha-tab-button>DEMO2</yorha-tab-button>
    </yorha-tab>

    <yorha-image-box width="100px" height="100px">
<!--        <img src="http://114.116.47.23:8848/6O.jpg" width="93" height="93">-->
    </yorha-image-box>
    <yorha-check-box :name="123">Demo</yorha-check-box>
    <yorha-radio name="sex" value="M">M</yorha-radio>
    <yorha-radio name="sex" value="F">F</yorha-radio>
    <yorha-input></yorha-input>
    <yorha-switch v-model:checked="checked"></yorha-switch>
    <yorha-select></yorha-select>
    <h1>小按钮</h1>
    <yorha-small-button @click="demo">open</yorha-small-button>
    <yorha-button @click="openBigDialog">Demo</yorha-button>
    <yorha-button @click="showBigLoading">Demo</yorha-button>
    <h1>普通按钮</h1>

    <yorha-button-group type="checkBox" :buttons="btns2"></yorha-button-group>
    <yorha-button-group type="radio" :buttons="btns3"></yorha-button-group>
    <yorha-list-box>
        <yorha-tree
                v-model:tree-data="treeData"
                :auto-read="true"
                @select="selectHandler"></yorha-tree>
    </yorha-list-box>
    <yorha-popover></yorha-popover>
    <div style="height: 1000px"></div>
</template>

<script setup>
import YorhaPopover from "./components/YorhaPopover.vue";
import {YorhaMessageBox, YorhaDialog, YorhaBigDialog, YorhaSmallLoading, YorhaBigLoading} from "../YoRHa/index";
import {reactive, ref, render, watch} from "vue";

let demo1 = ref(1)

let btns = {
    'Type one': true,
    'Type two': false,
    'Type three': false,
}

let btns2 = {
    'Type one': true,
    'Type two': false,
    'Type three': false,
}

let btns3 = {
    'Type one': true,
    'Type two': false,
    'Type three': false,
}

let treeData = ref([
    {
        title: '完成项目需求分析',
        id: '1',
        tag: true,
        msg:1,
        children: [
            {title: '调研需求', id: '11', tag: false,msg:1},
            {title: '编写文档', id: '12', tag: true,msg:1},
        ]
    },
    {
        title: '完成项目搭建',
        id: '2',
        tag: true,
        msg: 1,
        children: [
            {title: '前端搭建', id: '21', tag: true,msg:1},
            {
                title: '后端搭建', id: '22', tag:true,msg:1, children: [
                    {title: '项目测试', id: '221', tag:true,msg:1}
                ]
            },
        ]
    },
    {
        title: '项目上线',
        id: '3',
        tag:true,
        msg:1
    },
])

let checked = ref(false)

/*
* 树形控件的响应时间
* */
function selectHandler(id) {
    console.log(treeData.value)
}


function change(e) {
    let loading = new YorhaSmallLoading('Please wait...')
}

function demo() {
    YorhaMessageBox.confirm('WARNING', 'FILE').then(() => {
        console.log('file')
    })
}

function showBigLoading() {
    let msg = [['demo','true'],['demo2','Green']]
    let l = new YorhaBigLoading(msg, false)
    l.open()
    setTimeout(()=>{
        l.close()
    },3000)
}

watch(checked, (value, oldValue) => {
    console.log(value, oldValue)
})

function openBigDialog() {
    let steps = [
        'If you want to play this game',
        'You need to select your gamer type first',
        'Now select'
    ]
    let btns = {
        'Type one': true,
        'Type two': false,
        'Type three': false,
    }
    YorhaBigDialog.ask('POD042', steps, true, btns).then(answer => {
        let loading = new YorhaSmallLoading('Please wait...')
        setTimeout(() => {
            loading.close()
            YorhaDialog.ask('DANGER', answer).then(() => {
                console.log('confirm')
            }).catch(() => {
                console.log('cancel')
            })
        }, 3000)

    })
}


</script>

<style lang="less" scoped>


</style>
